<template>
    <div>
        <div class="login">
            <Form ref="formValidate" :model="formItem" :rules="ruleValidate" :label-width="100">
                <FormItem label="原来密码" prop="pwd">
                    <Input v-model="formItem.pwd"  type="password" placeholder="输入账号"></Input>
                </FormItem>
                <FormItem label="新密码" prop="newPwd">
                    <Input v-model="formItem.newPwd" type="password" placeholder="输入密码"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="newPwdConfirm">
                    <Input v-model="formItem.newPwdConfirm" type="password" placeholder="输入密码"></Input>
                </FormItem>
                <FormItem>
                    <Button type="success" @click="handleSubmit('formValidate')" style="width: 320px">修改</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>

    import md5 from 'js-md5';

    export default {
        name: "ChangePwd",
        data() {
            return {
                formItem: {
                    phone: '',
                    password: ''
                },
                ruleValidate: {
                    pwd: [
                        {required: true, message: '原密码不能为空', trigger: 'blur'}
                    ],
                    newPwd: [
                        {required: true, message: '新密码不能为空', trigger: 'blur'}
                    ],
                    newPwdConfirm: [
                        {required: true, message: '确认密码不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.newPwd != this.newPwdConfirm) {
                            this.$Message.error('两次新密码不一致');
                        } else {
                            let pwd = md5(this.formItem.pwd);
                            let newPwd = md5(this.formItem.newPwd);
                            this.formItem.pwd = pwd;
                            this.formItem.newPwd = newPwd;
                            this.$api.changePwd(this.formItem).then(() => {
                                this.$Message.info('修改成功，请重新登录');
                                this.localStorage.clear();
                                this.$router.push("/loign");
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .login {
        width: 400px;
        height: 200px;
        margin: 200px auto;
    }
</style>
